<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
	<link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 14px;
		}
		.login-content {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: url(../../img/login/body-back.png) no-repeat;
			background-size: 100% 100%;
		}
		.company-logo {
			position: absolute;
			top: 30px;
			left: 40px;
			width: 290px;
			height: 60px;
			background: url(../../img/login/logo-company.png) no-repeat;
			background-size: cover;
		}
		.company-phone {
			position: absolute;
			top: 50px;
			right: 40px;
			color: #fff;
		}
		.company-phone img {
			margin-right: 10px;
		}
		.company-phone span {
			vertical-align: middle;
		}
		.login-center {
			width: 1262px;
			margin: 0 auto;
			position: relative;
			top: calc(50% - 284px);
		}
		.login-ball {
			float: left;
			box-shadow: 30px 30px 20px #02275b;
		}
		.login-input {
			float: left;
			margin: 0 auto;
			margin-top: 58px;
			margin-left: 20px;
			width: 450px;
			height: 450px;
			background: url(../../img/login/login-back.png) no-repeat;
			background-size: 100% 100%;
			box-shadow: 25px 25px 20px #02275b;
		}
		.login-logo {
			margin-top: 30px;
			text-align: center;
		}
		.login-logo img{
			width: 75px;
			height: 75px;
		}
		.login-info {
			width: 330px;
			margin: 0 auto;
			margin-top: 20px;
		}
		.input-border {
			margin-bottom: 20px;
			border-bottom: 1px solid #022250;
		}
		.input-border span {
			display: inline-block;
			width: 75px;
			text-align: right;
			color: #DEDEDE;
		}
		.input-border .validata-prompt {
			display: none;
			position: absolute;
			margin-top: 5px;
			margin-left: 20px;
			font-size: 12px;
			color: red;
		}
		.input-border input {
			display: inline-block;
			width: calc(100% - 80px);
			vertical-align: middle;
			background-color: transparent;
			border: none;
			box-shadow: none;
			color: #fff;
		}
		.input-border input::-ms-input-placeholder {
			color: #dedede;
		}
		.input-border input::-webkit-input-placeholder {
			color: #dedede;
		}
		.input-border input:focus{
		    box-shadow: none;
		}
		.verification-code {
			display: inline-block;
			width: calc(100% - 102px);
		}
		.btn-prompt {
			background-color: transparent;
			color: #11B5AB;
			border-color: #11B5AB;
		}
		.btn-prompt:focus, .btn-prompt:hover {
			color: #11B5AB;
			border-color: #11B5AB;
		}
		.login-button {
			margin-top: 40px;
		}
		.btn-theme {
			margin-bottom: 20px;
			background-color: #11B5AB;
		    color: #fff;
		    border-color: #11B5AB;
		}
		.btn-theme:focus, .btn-theme:hover {
			color: #fff;
			background-color: #2aeee2;
		}
		.btn-theme:focus {
			outline: none !important;
			outline-offset: 0 !important;
		}
	</style>
</head>
<body>
	<div class="login-content">
		<div class="company-logo"></div>
		<div class="company-phone">
			<img src="../../img/login/login-phone.png" /><span>400-705-3322</span>
		</div>
		<div class="login-center">
			<div class="login-ball">
				<img src="../../img/login/login-ball.png" />
			</div>
			<div class="login-input">
				<div class="login-logo">
					<img src="../../img/login/logo2.png" />
				</div>
				<div class="login-info">
					<div class="input-border">
						<span>登录账户：</span>
						<input type="text" id="phone" class="form-control" placeholder="">
						<p id="phoneValidata" class="validata-prompt"></p>
					</div>
					<div class="input-border verification-code">
						<span>验证码：</span>
						<input type="text" id="code" class="form-control" placeholder="">
						<p id="codeValidata" class="validata-prompt"></p>
					</div>
					<button type="button" id="verificationCode" class="btn btn-prompt">获取验证码</button>
					<div class="input-border">
						<span>新密码：</span>
						<input type="password" id="password" class="form-control" placeholder="">
						<p id="passwordValidata" class="validata-prompt"></p>
					</div>
					<div class="input-border">
						<span>确认密码：</span>
						<input type="password" id="newPassword" class="form-control" placeholder="">
						<p id="newPasswordValidata" class="validata-prompt"></p>
					</div>
					<div class="login-button">
						<button id="saveNewPassword" type="button" class="btn btn-theme btn-block">保&nbsp;&nbsp;存</button>
					</div>
				</div>	
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script type="text/javascript" src="../../js/utils/toastr.min.js" ></script>
	<script>
		$(function(){
			toastr.options = {
                "timeOut": 2000,
                "positionClass": "toast-bottom-right"
            };
		});
		$("#verificationCode").click(function(){
			var phone = $("#phone").val();
			if (!checkPhone(phone)) {
				$("#phoneValidata").text("账户格式不对").show();
				return;
			}
			$(this).attr("disabled", true);
			$("#phoneValidata").hide();
			base.postData(base.url.sendVerificationCode,{phone:phone,type:1},callbackVerificationCode);
		});
		function callbackVerificationCode(data){	
			if (data.success) {
				setTime("verificationCode");
				toastr.success("发送成功");
			}else{
				$("#verificationCode").removeAttr("disabled");
				toastr.warning(data.msg);
			}
		}
		$("#saveNewPassword").click(function(){
			var phone = $("#phone").val();
			if (!checkPhone(phone)) {
				$("#phoneValidata").text("账户格式不对").show();
				return;
			}
			var code = $("#code").val();
			if (code == "" || !checkIntNum(code)) {
				$("#codeValidata").text("验证码错误").show();
				return;
			}
			var password = $("#password").val();
			if (password.length < 6) {
				$("#passwordValidata").text("密码不能低于6位").show();
				return;
			}
			var newPassword = $("#newPassword").val();
			if (password != newPassword) {
				$("#newPasswordValidata").text("确认密码不等于新密码").show();
				return;
			}
			$(".validata-prompt").hide();
			$(this).attr("disabled", true);
			base.postData(base.url.forgotPassword,{phone:phone,newPassword:newPassword,code:code},callbackForgotPassword);
		});
		function callbackForgotPassword(data){
			if (data.success) {
				toastr.success("设置密码成功");
				setTimeout(function() {
					window.location.href = "../login.html"
				},2000);
			}else{
				toastr.warning(data.msg);
				$("#saveNewPassword").removeAttr("disabled");
			}
		}
		var countdown=60;
		//构造一个倒计时函数叫settime
		function setTime(obj) {
		    //开始判断倒计时是否为0
		    if (countdown == 0) {
		        $("#"+obj).removeAttr("disabled");
		        $("#"+obj).html("重新发送");
		        countdown = 60;
		        //立即跳出settime函数，不再执行函数后边的步骤
		        return;
		    } else {
		        $("#"+obj).attr("disabled", true);
		        $("#"+obj).html(countdown+'s后重发');
		        countdown--;
		    }
		 	//过1秒后执行倒计时函数
		  	setTimeout(function() {setTime(obj)},1000)
		}
	</script>
</body>
</html>
